<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS常用布局演示</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 20px auto;
            padding: 0 20px;
        }
        
        .example {
            margin-bottom: 40px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        
        .box {
            background-color: #f0f0f0;
            padding: 10px;
            margin: 5px;
            border: 1px solid #999;
        }

        /* 自定义显示模式 */
        .inline .box { display: inline; }
        .block .box { display: block; }
        .inline-block .box { display: inline-block; width: 150px; }
    </style>
</head>
<body>
    <!-- 内联(inline)示例 -->
    <div class="example inline">
        <h2>inline 布局</h2>
        <p>元素在一行显示，不换行，无法设置宽高</p>
        <div class="box">内联元素1</div>
        <div class="box">内联元素2</div>
        <div class="box">内联元素3</div>
    </div>

    <!-- 块级(block)示例 -->
    <div class="example block">
        <h2>block 布局</h2>
        <p>元素独占一行，可以设置宽高</p>
        <span class="box">块级元素1</span>
        <span class="box">块级元素2</span>
        <span class="box">块级元素3</span>
    </div>

    <!-- 行内块(inline-block)示例 -->
    <div class="example inline-block">
        <h2>inline-block 布局</h2>
        <p>元素在一行显示，同时可以设置宽高</p>
        <div class="box">行内块1</div>
        <div class="box">行内块2</div>
        <div class="box">行内块3</div>
        <div class="box">行内块4</div>
        <div class="box">行内块5</div>
        <div class="box">行内块6</div>
    </div>

    <footer>
        <p style="text-align: center;color: #999;">[羽神同行]CSS陪跑训练营 &copy; EOVA.CN</p>
    </footer>
</body>
</html>